import Vue from "vue";
//创建Vuex仓库
import Vuex from "vuex";

//使用Vuex插件
Vue.use(Vuex);

//Vuex提供了Store方法,专门用来创建一个vuex的仓库,接受一个配置对象作为参数
//配置对象中可以添加 state(数据) mutations(修改数据的方法) actions(异步操作的方法) getters(vuex的计算属性) modules(模块化)
export default new Vuex.Store({
  //Vuex数据
  state: {
    count: 2,
    price: 4,
    a: {
      b: {
        c: {
          d: 1,
        },
      },
    },
  },

  //Vuex的计算属性,每一个计算属性都是一个函数,函数接受当前vuex的state作为参数
  getters: {
    //vuex的getters使用场景1:数据是state的数据计算出来的
    totalPrice(state) {
      return state.count * state.price;
    },
    // vuex的getters使用场景2:vuex中的state数据非常复杂,而我们只需要其中的某个部分
    d(state) {
      return state.a.b.c.d;
    },
  },

  //mutations:包含所有 修改vuex属性的事件函数的 对象
  mutations: {
    increment(state) {
      //mutations中的事件函数this指向当前的store对象
      //mutations中的事件函数的第一个参数是当前store对象的state

      //mutations属性的事件函数中直接对state数据操作就可以(遵守vue的响应式修改数据的规范)
      state.count++;
    },

    incrementN(state, payload) {
      //mutations中的事件函数的第二个参数是 当前事件被 commit 的时候 传递的载荷payload
      state.count += payload.n;
    },
  },

  actions: {
    /* 
      actions中的方法专门用来处理异步的，但是不能操作数据
      当异步结束后，再提交给mutation处理数据

      actions中的方法接收一个阉割版store作为参数,提供的commit方法可以提交mutations
    
    */
    incrementWait(store) {
      // console.log(store);
      setTimeout(() => {
        store.commit("increment");
      }, 2000);
    },

    incrementNWait(store, payload) {
      // console.log(store, payload);
      setTimeout(() => {
        store.commit("incrementN", payload);
      }, 2000);
    },
  },
});
